<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <link rel="stylesheet" href="../static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../static/plugins/layui/css/animate.min.css">
    <link rel="stylesheet" href="../static/plugins/layui/css/soulTable.css">
</head>
<style>
    .ok-body {
        padding: 10px
    }
    .layui-form-item .layui-inline {
        margin-bottom: 5px;
         margin-right: 0px;
    }
    .layui-form-pane .layui-form-label {
        width: 90px;
    }
    .layui-form-item .layui-input-inline {
        width: 170px;
    }
</style>

<body>
<div class="ok-body">

    <div class="layui-row" style="margin-top: 15px">
        <form class="layui-form layui-form-pane">

            <div class="layui-form-item" style="margin-bottom: 5px;">

                <div class="layui-inline">
                    <label class="layui-form-label">设备类型</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <select name="modelId" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>


                <div class="layui-inline">
                    <label class="layui-form-label">编号</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="number" class="layui-input" />
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="name" class="layui-input" />
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">型号</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="modelNumber" class="layui-input" />
                    </div>
                </div>

            </div>

            <div class="layui-form-item">

                <div class="layui-inline">
                    <label class="layui-form-label">生产厂家</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input type="text" name="producer" class="layui-input" />
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">生产线</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <select name="productionLine" lay-search>
                            <option value=""></option>
                        </select>
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">安装年月</label>
                    <div class="layui-input-inline" style="margin-right: 0px;">
                        <input class="layui-input" name="installDate" id="installDate" autocomplete="off">
                    </div>
                </div>

                <div class="layui-inline">
                    <button class="layui-btn  layui-btn-normal" style="margin-left: 10px" lay-submit
                            lay-filter="search">搜索
                    </button>

                    <span>
                        <button type="button" class="layui-btn layui-btn-warm" id="add" style="float: right;margin-left: 5px;">新增</button>
                        <button type="button" class="layui-btn layui-btn-danger" id="delete" style="float: right">删除</button>
                        <button type="button" class="layui-btn layui-btn-normal" id="export" style="float: right;margin-left: 70px;">导出</button>
                     </span>
                </div>
            </div>

        </form>

    </div>

    <hr class="layui-bg-orange">

    <table class="layui-hide" id="device" lay-filter="device"></table>
    <!--分页Div-->
    <div id="pageDiv"></div>

</div>

<script src="../static/plugins/layui/layui.js"></script>
<script src="../static/js/jquery-3.2.1.min.js"></script>
<script src="../static/js/jquery.base64.js"></script>
<script src="../static/js/device.js"></script>
<script src="../static/js/JSONToExcelConvertor.js"></script>

<script th:inline="none">
    layui.config({
        base: '../static/plugins/layui/lay/soulTable/'
    }).extend({
        soulTable: 'soulTable'  // 模块别名
    });
    layui.use(['table', 'laypage', 'form', 'layer', 'soulTable','laydate'], function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;
        var soulTable = layui.soulTable;

        JJZ.initSelect(JJZ.named('modelId'), '/model/dataGrid', function (noError) {
                form.render();
        });

        JJZ.initSelect(JJZ.named('productionLine'), '/productionLine/dataGrid', function (noError) {
            form.render();
        });

        //设备安装年月
        laydate.render({
            elem: '#installDate'
            ,type: 'month'
            ,format: 'yyyy-MM'
        });


        var tableName = 'device';

        var tableRenderObject = {
            elem: '#' + tableName
            , title: '设备数据表'
            , tableName: tableName
            , searchCol: ''
            , searchValue: ''
            , cellMinWidth: 80
            , defaultToolbar: ['filter', 'print']
            , toolbar: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {
                    title: '#', width: 50, show: 2, children: [
                        {
                            title: '配件列表'
                            , height: 300
                            , limit: 10000000
                            , page: false
                            , url: '../deviceComponent/dataGrid'
                            , where: function (d) {
                                return {deviceId: d.id};
                            }
                            , parseData: function (res) { //res 即为原始返回的数据
                                return {
                                    "code": 0, //解析接口状态
                                    "msg": "success", //解析提示文本
                                    "count": res.content['total'], //解析数据长度
                                    "data": res.content['records'] //解析数据列表
                                };
                            }
                            , cols: [[
                                {type: 'numbers', fixed: 'left'},
                                {field: 'name', align: 'center', title: '配件名称规格'},
                                {field: 'unit', align: 'center', title: '单位'},
                                {field: 'avgLife', align: 'center', title: '平均寿命'},
                                {field: 'remainDays', align: 'center', title: '预计剩余寿命'},
                                {
                                    title: '操作', align: 'center', templet: function (data) {
                                        return '<a href="javascript:changeDeviceComponent(' + data.id + ')" class="layui-table-link">更换配件</a>';
                                    }
                                }
                            ]]
                            , done: function () {
                                layui.soulTable.render(this);
                            }
                        }
                    ]
                }
                , {field: 'name', title: '设备名称', align: 'center', width: 116}
                , {field: 'number', title: '设备编号', align: 'center', width: 87}
                , {field: 'description', title: '设备描述', align: 'center'}
                , {field: 'modelName', title: '设备类型', align: 'center', width: 116}
                , {field: 'producer', title: '生产厂商', align: 'center'}
                , {field: 'productionName', title: '生产线', align: 'center', width: 115}
                , {field: 'creatorName', title: '创建者', align: 'center', width: 80}
                , {
                    title: '创建日期', align: 'center', width: 103, templet: function (d) {
                        return JJZ.FormatDate(d.gmtCreate, 'yyyy-MM-dd');
                    }
                }
                , {
                    fixed: 'right', align: 'center', title: '操作', templet: function (d) {
                        return '<a href="javascript:JJZ.editPage(\'' + tableName + '\',' + d.id + ')" class="layui-table-link">编辑</a>&nbsp;&nbsp;' +
                            '<a href="javascript:selectDeviceFaultInfo(' + d.id + ')" class="layui-table-link">故障列表</a>&nbsp;&nbsp;' +
                            '<a href="javascript:addFaultInfo(' + d.id + ',\'' + d.modelId + '\')" class="layui-table-link">新增故障</a>';
                    }
                }
            ]]
            , done: function () {
                soulTable.render(this);
            }
        };


        var myTable = new JJZ.MyTable(tableRenderObject);

        form.on('submit(search)', function (data) {
            var encodeStr = $.base64.encode(JSON.stringify(data.field), 'utf-8');
            var param = 'json=' + encodeURIComponent(encodeStr);
            tableRenderObject.initParam = param;
            myTable.render();
            return false;
        });

        //新增，跳转至页面
        $('#add').click(function () {
            myTable.add();
        });

        //批量删除数据
        $('#delete').click(function () {
            var checkStatus = table.checkStatus('device') //idTest 即为基础参数 id 对应的值
                , data = checkStatus.data; //获取选中的数据
            if (data.length === 0) {
                layer.msg('请至少选择一行需要删除的数据');
            } else {
                layer.confirm('确认删除？', function (index) {
                    myTable.delete(data);
                    myTable.render();
                    layer.close(index);
                });
            }
        });


        $('#export').click(function () {
            var checkStatus = table.checkStatus('device') //idTest 即为基础参数 id 对应的值
                , data = checkStatus.data; //获取选中的数据
            if (data.length === 0) {
                layer.msg('请至少选择一行需要导出的数据');
            } else {
                var temp = [];
                for (var index in data) {
                    temp.push(data[index].id);
                }
                var encodeStr = $.base64.encode(JSON.stringify(temp), 'utf-8');
                var param = 'json=' + encodeURIComponent(encodeStr);
                window.location.href = '../file/ignDeviceExport?json=' + encodeURIComponent(encodeStr);
            }
        })

    });

    function addFaultInfo(deviceId, modelId) {
        JJZ.checkGetRequestPermission('/faultInfo/iframeAdd', function (hasPermission) {
            if (hasPermission) {
                parent.layer.open({
                    type: 2
                    , content: ['faultInfo/iframeAdd?deviceId=' + deviceId + '&modelId=' + modelId] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    , area: ['880px', '800px']
                });
            } else {
                layer.msg('无权访问');
            }
        })
    }

    function selectDeviceFaultInfo(deviceId) {

        JJZ.checkGetRequestPermission('/device/deviceFault', function (hasPermission) {
            if (hasPermission) {
                parent.layer.open({
                    type: 2
                    , resize: false
                    , content: ['device/deviceFault?id=' + deviceId] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    , area: ['95%', '80%']
                });
            } else {
                layer.msg('无权访问');
            }
        })
    }

    function changeDeviceComponent(deviceComponentId) {
        JJZ.requestData('/deviceComponent/change', 'deviceComponentId=' + deviceComponentId, function (hasPermission) {
            layer.msg('更换配件成功', {icon: 1});
        })
    }


</script>

</body>
</html>